<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item :label="sysBusinessCategory.categoryType" prop="appId">
          <el-select
            ref="myAppId"
            v-model="queryForm.appId"
            :placeholder="operateType.pleaseSelect"
            filterable
          >
            <el-option
              v-for="item in appOptions"
              :key="item.id"
              :label="item.name"
              :value="item.appId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="sysBusinessCategory.categoryName" prop="name">
          <el-input
            v-model="queryForm.name"
            :placeholder="sysBusinessCategory.categoryName"
            clearable
          />
        </el-form-item>
        <el-form-item :label="sysBusinessCategory.status" prop="status">
          <el-select v-model="queryForm.status">
            <el-option :label="operateType.all" :value="0" />
            <el-option :label="sysBusinessCategory.enable" :value="1" />
            <el-option :label="sysBusinessCategory.disable" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">{{
            operateType.query
          }}</el-button>
          <el-button @click="cancelForm">{{ operateType.clear }}</el-button>
        </el-form-item>
      </el-form>
      <div class="base-content-operate">
        <el-button
          v-rights="'Create'"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >{{ operateType.add }}</el-button
        >
      </div>
      <div class="main-layout">
        <div class="sideBar-left">
          <el-input
            v-model="filterText"
            :placeholder="sysBusinessCategory.enterKeywordsFiltering"
            style="width: 230px; padding-top: 30px"
          >
          </el-input>
          <el-tree
            ref="tree"
            class="customer-tree"
            default-expand-all
            node-key="id"
            :data="categoryTree"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
        <div class="sideBar-right" style="overflow: hidden">
          <div class="child-table" style="padding-top: 30px">
            <p style="font-size: 16px; font-weight: 700; padding-left: 10px">
              {{ currentNodeName }}
            </p>
            <el-table
              :data="list"
              element-loading-text="Loading"
              fit
              highlight-current-row
            >
              <el-table-column
                align="center"
                :label="sysBusinessCategory.serialNumber"
                :width="$i18n.locale === 'en' ? 120 : 50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column :label="sysBusinessCategory.categoryName">
                <template slot-scope="scope">
                  {{ $i18n.locale === "en" ? scope.row.eName : scope.row.name }}
                </template>
              </el-table-column>
              <el-table-column
                :label="sysBusinessCategory.classificationIdentification"
              >
                <template slot-scope="scope">
                  {{ scope.row.code }}
                </template>
              </el-table-column>
              <el-table-column :label="sysBusinessCategory.status">
                <template slot-scope="scope">
                  {{
                    scope.row.status == 1
                      ? sysBusinessCategory.enable
                      : sysBusinessCategory.disable
                  }}
                </template>
              </el-table-column>
              <!-- <el-table-column label="上级分类">
                <template slot-scope="scope">
                  {{ scope.row.parentName }}
                </template>
              </el-table-column> -->
              <el-table-column :label="sysBusinessCategory.operator">
                <template slot-scope="scope">
                  {{ scope.row.operatorName }}
                </template>
              </el-table-column>
              <el-table-column :label="sysBusinessCategory.operationTime">
                <template slot-scope="scope">
                  {{ scope.row.updateTime }}
                </template>
              </el-table-column>
              <el-table-column :label="operateType.action">
                <template slot-scope="scope">
                  <div class="base-table-operation">
                    <el-link
                      v-rights="'Update'"
                      size="mini"
                      type="primary"
                      @click="handleEdit(scope.row)"
                      >{{ operateType.redact }}</el-link
                    >
                    <el-link
                      v-rights="'Delete'"
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.row)"
                      >{{ operateType.delete }}</el-link
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <BasePagination
            :total="pagination.total"
            :current-page="pagination.pageIndex"
            :page-count="pagination.total"
            @changePage="changePage"
            @sizeChange="sizeChange"
          />
        </div>
      </div>
      <SysBusinessCategoryEdit
        v-model="dialogFormVisible"
        :edit-id="editId"
        :app-id="appId"
        :parent-id="parentId"
        @success="DialogCall"
      />
    </div>
  </div>
</template>

<script>
import {
  getList,
  deleteRecord,
  getTreeData,
  getAppOptions,
} from "../../../api/SysBusiness/SysBusinessCategory";
import SysBusinessCategoryEdit from "./SysBusinessCategoryEdit.vue";

export default {
  name: "SysBusinessCategoryList",
  components: { SysBusinessCategoryEdit },
  data() {
    return {
      loading: true,
      appOptions: [],
      editId: "",
      parentId: "0",
      appId: "",
      list: [],
      queryForm: {
        name: "",
        status: 1,
        parentId: "0",
        appId: 1000,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      filterText: "",
      categoryTree: [],
      defaultProps: {
        children: "children",
        label: "name",
        id: "id",
      },
      currentNodeName: "",
      dialogFormVisible: false,
      formLabelWidth: "300px",
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessCategory() {
      return this.$t("SysBusinessCategory") || {};
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getAppOptions()
        .then((res) => {
          if (res.data) {
            this.appOptions = res.data;
            this.currentNodeName = res.data[0].name;
          } else {
            this.appOptions = [];
            this.currentNodeName = "";
          }
        })
        .catch();
      this.getTree();
      this.getList();
    },

    getTree() {
      getTreeData({ AppId: this.queryForm.appId, Status: 0 })
        .then((res) => {
          this.loading = false;
          this.categoryTree = res.data ? res.data : [];
        })
        .catch(() => {
          this.loading = false;
        });
    },
    towerChange(val) {
      let obj = {};
      obj = this.appOptions.find((item) => {
        return item.value === val;
      });
      this.categoryTree = [
        {
          name: obj.label,
          value: obj.value,
          children: [],
        },
      ];
      this.getTree();
    },
    handleNodeClick(data, node) {
      if (data.id !== null && data.id.length !== 0) {
        // this.$refs.queryForm.resetFields();
        this.currentNodeName = data.name;
        this.queryForm.parentId = data.id;
        this.queryForm.status = 0;
        this.queryForm.name = "";
        this.getList();
      }
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.queryForm.parentId = 0;
      this.init();
    },
    onNew() {
      this.editId = "";
      this.appId = this.queryForm.appId;
      this.parentId = this.queryForm.parentId;
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getTree();
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData) {
      this.editId = rowData.id;
      this.appId = rowData.appId;
      this.parentId = rowData.parentId;
      this.dialogFormVisible = true;
    },
    onQuery() {
      this.queryForm.parentId = "0";
      this.currentNodeName = this.$refs.myAppId.selected.label;
      this.getTree();
      this.getList();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 关闭窗体回调函数
    DialogCall() {
      this.getTree();
    },
  },
};
</script>
